<script setup>
import { getCurrentInstance, reactive, ref } from 'vue';
import tools from '../tools/tools'
const { proxy } = getCurrentInstance()
const music = reactive([]);
const Mdetail = reactive([]);
const src = ref("");
const flag = ref(true)
// 根据兄弟组件传的id查询歌曲URL
tools.E.on("Myevent", (id) => {
    if (Mdetail.length === 0) {
        Mdetail.push(id)
    } else {
        Mdetail.splice(0, 1, id)
    };
    flag.value = false;
    src.value = Mdetail.length === 0 ? "http://127.0.0.1:5173/src/assets/OIP-C.jpg" : Mdetail[0].al.picUrl;
    proxy.$https.getSong({ id: id.id, level: "lossless" }).then(res => {
        // 判断数组length，点击切换歌曲
        if (music.length === 0) {
            music.push(res.data.data[0].url)
        } else {
            music.splice(0, 1, res.data.data[0].url)
        }
    })
});
// 接受歌单详情歌曲
const Musics = reactive([]);
const songDetail = reactive([]);
tools.E.on("songs", (songs) => {
    for (let i in songs.value) {
        Musics.push(songs.value[i].id)
        songDetail.push(songs.value[i])
    };
});
// 获取audio的DOM
const audio = ref(null);
// 监听播放结束，执行其他功能
let i = null
function over() {
    if (i === null) {
        let n = Musics.indexOf(Mdetail[0].id);
        i = n + 1;
        if (i === Musics.length) i = 0;
        Mdetail.splice(0, 1, songDetail[i])
        proxy.$https.getSong({ id: Musics[i], level: "lossless" }).then(res => {
            music.splice(0, 1, res.data.data[0].url);
        })
    } else {
        if (i === Musics.length) i = 0;
        Mdetail.splice(0, 1, songDetail[i + 1])
        proxy.$https.getSong({ id: Musics[i + 1], level: "lossless" }).then(res => {
            music.splice(0, 1, res.data.data[0].url);
        })
        i + 1;
    }
};
// 手动切换歌曲
let s = null
function upone() {
    let n = Musics.indexOf(Mdetail[0].id);
    s = n - 1;
    if (s < 0) s = 0;
    if (s === Musics.length) s = 0;
    Mdetail.splice(0, 1, songDetail[s])
    src.value=songDetail[s].al.picUrl
    proxy.$https.getSong({ id: Musics[s], level: "lossless" }).then(res => {
        music.splice(0, 1, res.data.data[0].url);
    })

};
function nextone() {
    let n = Musics.indexOf(Mdetail[0].id);
    s = n + 1;
    if (s === Musics.length) s = 0;
    Mdetail.splice(0, 1, songDetail[s])
    src.value=songDetail[s].al.picUrl
    proxy.$https.getSong({ id: Musics[s], level: "lossless" }).then(res => {
        music.splice(0, 1, res.data.data[0].url);
    })
};
</script>
<template>
    <div class="box">
        <img src="../assets/OIP-C.jpg" v-show="flag">
        <img :src=src v-show="!flag">
        <div class="Mal">
            <p>{{ Mdetail.length === 0 ? "" : Mdetail[0].name }}</p>
            <p class="songer">{{ Mdetail.length === 0 ? "" : Mdetail[0].ar[0].name }}</p>
        </div>
        <el-icon :size="28" class="an1" title="上一曲" @click="upone">
            <CaretLeft />
        </el-icon>
        <el-icon :size="28" class="an2" title="下一曲" @click="nextone">
            <CaretRight />
        </el-icon>
        <audio :src='music[0]' controls autoplay ref="audio" @ended="over"></audio>
        <el-icon :size="20" class="cf" title="顺序播放">
            <Refresh />
        </el-icon>
    </div>
</template>
<style scoped>
.box {
    display: flex;
    align-items: center;
    justify-content: center;
}

img {
    width: 50px;
    height: 50px;
    margin-right: 10px;
}

audio {
    outline: none;
    width: 800px;
    color: #fff;
}

.songer {
    font-size: 14px;
}

.an1 {
    cursor: pointer;
}

.an2 {
    cursor: pointer;
}

.cf {
    cursor: pointer;
}
</style>